<template>
  <div class="divLogin">
    <div class="divContent">
      <div class="divLeft">
        <div class="pic">
          <img
            src="http://www-wms-java.itheima.net/img/title.ef005a7a.png"
            alt=""
          />
        </div>
        <div class="login-form">
          <div class="form-pic">
            <img src="../assets/shouji.png" alt="" class="pic" />
            <input
              v-model="uname"
              type="text"
              name=""
              id=""
              class="login-input"
            />
          </div>
          <div class="form-pic">
            <div><img src="../assets/suo.png" alt="" class="pic" /></div>
            <input
              v-model="password"
              type="password"
              name=""
              id=""
              class="login-input"
            />
          </div>
          <div style="margin-top: 60px" class="login-password">
            <input type="checkbox" class="login-checkbox" />记住密码
          </div>
          <div>
            <button class="login-button" @click="handLogin">立即登录</button>
          </div>
        </div>
      </div>
      <div class="divRight">
        <img
          src="http://www-wms-java.itheima.net/img/contentBg.1321d126.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginIndex',
  data () {
    return {
      uname: 'admin',
      password: '123456'
    }
  },
  methods: {
    handLogin () {
      this.$router.push('/dashboard')
    }
  }
}
</script>

<style>
.divLogin {
  background: #fdfafa;
}
.divContent {
  display: flex;
  width: 958px;
  height: 516px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px rgb(93 93 93 / 33%);
  background-color: #fff;
  border-radius: 40px;
}
.divLeft {
  width: 398px;
  height: 516px;
  background: #fff;
  /* background-color: skyblue; */
  border-radius: 34px 0 0 34px;
}
.divLeft .pic {
  width: 150px;
  height: 64px;
}
.divLeft .pic img {
  margin-left: 100px;
  margin-top: 60px;
  width: 150px;
  height: 64px;
}
.login-form {
  margin-top: 90px;
  margin-left: 50px;
}
.login-form .form-pic {
  display: flex;
  margin-top: 40px;
  width: 280px;
  height: 50px;
}
.form-pic .pic {
  border-radius: 6px 0 0 6px;
  width: 50px;
  height: 56px;
}
.login-input {
  border-radius: 0 6px 6px 0;
  width: 240px;
  height: 50px;
  background: #f8f5f5;
  border-color: transparent;
}
.login-input {
  outline: none;
}
.login-input:hover {
  height: 54px;
  border: 1px solid #ffb200;
  box-sizing: border-box;
  border-radius: 0 6px 6px 0;
}
.login-button {
  width: 280px;
  height: 50px;
  background: #ffb200;
  border-radius: 8px;
  box-shadow: 0 2px 9px 1px rgb(255 178 0 / 47%);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: #332929;
  line-height: 22px;
  border-style: none;
  margin-top: 50px;
}
.divRight {
  width: 560px;
  height: 516px;
  border-radius: 0 34px 34px 0;
}
.divRight img {
  width: 560px;
  height: 516px;
}
</style>
